<!-- 销售客户 -->
<template>
  <div class="salesCustomers">
    <div class="salesCustomers_top">
      <lineBarChart ref="salesCustomersChart" id="salesCustomersChart" width="100%" height="96%"></lineBarChart>
    </div>
    <div class="salesCustomers_bottom">
      <tableBox class="tb" :data="tableData" :show-serial-number="true" :showThead="true" :thead-list="tableThead" />
    </div>
  </div>
</template>
<script>
import tableBox from "../components/tableBox.vue"

import lineBarChart from "../components/lineBarChart.vue"
import { getLevelStockCommodityTypeRate, getLevelCommodityTypeRateByCommodityTypeId, getLevelCommodityTypeTableByCommodityTypeId } from "@/api/bi/assetsAndMaterials";
export default {
  components: { lineBarChart, tableBox },
  data() {
    return {
      tableThead: ['', '客户名称', '销售订单数量', '开具订单数量', '取消订单数量', '未完成订单数量', '已完成', '总金额', '利润'],
      tableData: []
    }
  },
  mounted() {
    // this.load = this.$loading({
    //   lock: true,
    //   text: '加载中...',
    //   spinner: 'el-icon-loading',
    //   background: 'rgba(0, 0, 0, 0.7)'
    // });
    this.getChartData()
    this.getTableData()
  },
  methods: {
    getChartData() {
      let title = {
        text: '销售订单',
        left: 'center'
      }
      let xAxisData = []
      let legendData = { show: true, data: ['销售订单数', '取消订单数', '开具订单数', '未完成订单数', '已完成订单数'] }
      let seriesData = []
      let dataNum = this.getDaysInMonth()
      for (let i = 1; i <= dataNum; i++) {
        xAxisData.push(i)
      }
      legendData.data.forEach((item, index) => {

        let type = { type: 'line' }
        if (index > 2) {
          type = {
            type: 'bar',
            stack: 'Ad',
          }
        }
        seriesData.push(
          {
            name: legendData.data[index],
            ...type,
            data: [200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200,],
          },
        )
      })

      this.$refs.salesCustomersChart.initChart(legendData, xAxisData, seriesData, title)
    },
    getTableData() {
      this.tableData = [
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
        [{ val: '客户名称' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }],
      ]
    },
    getDaysInMonth() {
      const today = new Date();
      const currentYear = today.getFullYear();
      const currentMonth = today.getMonth() + 1;
      const nextMonth = new Date();
      nextMonth.setFullYear(currentYear, currentMonth, 1);
      nextMonth.setDate(nextMonth.getDate() - 1);
      return nextMonth.getDate();
    },
  }

}
</script>
<style lang="scss" scoped>
.salesCustomers {
  background: #F2F4FC;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .salesCustomers_top {
    background-color: rgba(255, 255, 255, 0.6);
    padding: 22px;
    height: 40%;
    border-radius: 6px;
  }

  .salesCustomers_bottom {
    background-color: rgba(255, 255, 255, 0.6);
    height: 50%;
    flex-grow: 1;
    padding: 22px;
    margin-top: 20px;
    border-radius: 6px;
    display: flex;

  }
}
</style>
